<template>
  <div class="fillContainer">

    <div>
      <!-- <el-form :inline="true" ref="add_data">
        <el-form-item class="btnRight">
          <el-button type="primary" size="small" icon="view" @click="handleAdd()">
            添加
          </el-button>
        </el-form-item>
      </el-form> -->
      <div id="search">
        <input class="user-input" type="text" name="search" placeholder="请输入内容" v-model="input" @change="search">
        <input class="user-btn" type="button" value="搜索">
      </div>

    </div>

    <div class="table_container">
      <!-- 内容模块 -->
      <el-table :data="info" style="width: 100%" max-height="450" border min-width="1000px">
        <el-table-column type="index" label="序号" align='center' width="70%">
        </el-table-column>
        <el-table-column prop="title" label="评论内容" align='center' width="700%">
          <template slot-scope="scope">
            <span> {{ scope.row.ComContent }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="评论时间" align='center' width="200%">
          <template slot-scope="scope">
            <span> {{ scope.row.Comtime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="用户id" align='center' width="50%">
          <template slot-scope="scope">
            <span> {{ scope.row.User_id }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="父评论id" align='center' width="50%">
          <template slot-scope="scope">
            <span> {{ scope.row.Father_id }}</span>
          </template>
        </el-table-column>
        <!-- 编辑删除 -->
        <el-table-column label="操作" align='center' prop="operation" min-width="200px">
          <template slot-scope="scope">
            <el-button type="warning" size="small" icon="edit" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button size="small" type="danger" icon="delete" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row>
        <el-col :span="24">
            <div class="pagination">
                <el-pagination
                    v-if='paginations.total > 0'
                    :page-sizes="paginations.page_sizes"
                    :page-size="paginations.page_size"
                    :layout="paginations.layout"
                    :total="paginations.total"
                    :current-page.sync='paginations.page_index'
                    @current-change='handleCurrentChange'
                    @size-change='handleSizeChange'>
                </el-pagination>
            </div>
        </el-col>
    </el-row>
    </div>


    <Dialog :dialog="dialog" :formData="formData"></Dialog>
  </div>
</template>

<script>
  import axios from "axios"
  import Dialog from "../components/CommentDialog"
  import Qs from 'qs'
  export default {
    data() {
      aid:(localStorage.getItem("aId"))
      return {
        aid:localStorage.getItem("aId"),
       //需要给分页组件传的信息
      paginations: {
        page_index: 1, // 当前位于哪页
        total: 0, // 总数
        page_size: 5, // 1页显示多少条
        page_sizes: [5, 10, 15, 20], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
      },
      allTableData: [],
        input: '',
        index: 0,
        info: [],
        // date: moment(Comtime).format('YYYY-MM-DD HH:mm:ss'),
        formData: {
          //Intitl是标题这个随意命名，ChXin是内容也是随意命名的，这里面的都是随意的
          Cid:'',
          ComContent:'',
          Comtime:'',
          User_id:'',
          Father_id:'',
        },
        dialog: {
          show: false,
          title: '',//添加 编辑
          option: 'edit'
        }
      }
    },
    mounted() {
      this.judge();
      var _this = this;
      axios.get("http://localhost:3000/api/comment")
        .then(res => {
          console.log("获取数据成功");
          console.log(res);
          _this.allTableData = res.data;
          _this.Data = res.data[0].Comtime;
          _this.setPaginations();
          console.log(_this.Data)

        })
        .catch(err => {
          console.log('获取数据失败' + err);
        })

    },
    components: {
      Dialog
    },
    methods: {
      judge(){
            if(!this.aid){
                this.$message({
                type:'error',
                message:'请先登录'
              })
              this.$router.push({path:'/adlog'});
            }
        },
      handleEdit(index, row) {
        // console.log(123);bianji
        this.dialog = {
          show: true,
          title: '修改信息',
          option: 'edit'
        };
        this.formData = {
          //row.后面的是数据库中的名字，前面的是刚刚随意命名的
          Cid:row.Cid,
          ComContent:row.ComContent,
          Comtime:row.Comtime,
          User_id:row.User_id,
          Father_id:row.Father_id,
        }
      },
      handleDelete(index, row) {
        // console.log(456)
        var flag=confirm("确定要删除这条内容吗？")
        if(flag){
        this.axios({
          method: 'post',
          url: `http://127.0.0.1:3000/api/postcomment/delete`,
          // headers:{
          //    'Content_type':'application/x-www-form-urlencoded'
          // },
          data: {
            Cid:row.Cid,
          }
        })
          .then(res => {
            this.$message({
              message: '成功',
              type: 'success',

            })
            this.dialog.show = false;
            console.log(this.formData);

            this.$router.go(0);
          })
          .catch(err => {
            console.log(err)
          })
}
      },
      // handleAdd() {
      //   // console.log(786)
      //   this.dialog = {
      //     show: true,
      //     title: '添加信息',
      //     option: 'add'
      //   };
      //   this.formData = {
      //     id:'',
      //     ComContent:'',
      //     Comtime:'',
      //     User_id:'',
      //     Father_id:'null',
      //   };
      //   this.dialog.show = true;

      // },
      search() {
        let _this = this;
        if (_this.input == '') {
          console.log('搜索空字符');
           _this.$router.go(0);
        }
        else {

          console.log('搜索' + _this.input);
          let a = _this.allTableData.filter(v => {
            return JSON.stringify(v.ComContent).indexOf(_this.input) !== -1;
          });
          console.log(a);
          _this.allTableData = a;
          // 分页数据  
          _this.setPaginations();
        }

      },

      handleCurrentChange(page) {
      // 当前页
      let sortnum = this.paginations.page_size * (page - 1);
      let table = this.allTableData.filter((item, index) => {
        return index >= sortnum;
      });
      // 设置默认分页数据
      this.info = table.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    },
    handleSizeChange(page_size) {
      // 切换size
      this.paginations.page_index = 1;
      this.paginations.page_size = page_size;
      this.info = this.allTableData.filter((item, index) => {
        return index < page_size;
      });
    },
    setPaginations() {
      // 总页数
      this.paginations.total = this.allTableData.length;
      this.paginations.page_index = 1;
      this.paginations.page_size = 5;
      // 设置默认分页数据
      this.info = this.allTableData.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    },
    
    }

  }
</script>

<style scoped>
  .fillContainer {
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
  }

  .btnRight {
    float: right;
  }

  .pagination {
    text-align: right;
    margin-top: 10px;
  }

  .pagination {
    text-align: right;
    margin-top: 10px;
  }

  .user-input {
    width: 90%;
    height: 100%;
    border: 2px solid rgba(0, 123, 255, 0.874);
    border-radius: 5px;
    box-sizing: border-box;
    outline: none;
    text-indent: 10%;
    font-size: 150%;
    font-family: 楷体;
  }

  .user-btn {
    width: 40%;
    height: 90%;
    border: none;
    border-radius: 5px;
    background: rgba(0, 123, 255, 0.874);
    vertical-align: middle;
    outline: none;
    color: white;
    font-size: 160%;
    font-family: 楷体;
  }

  #search {
    display: flex;
    width: 40%;
    margin-top: 1%;
  }
</style>